<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="kaiji">
    <meta name="keyword" content="标签, 博客, 文章, 文章列表， 标签文章列表">
    <title>文章详情信息列表</title>
	<#include "admin/common.ftl" />
	
	<style type="text/css">
		.form-control {color: black;}
	</style>
  </head>

  <body>

  <section id="container" class="">
      <!--header start-->
      <#include "admin/header.ftl" />
      <!--header end-->
      <!--sidebar start-->
      <#include "admin/sidebar.ftl" />
      <!--sidebar end-->
      <!--main content start-->
      <section id="main-content">
          <section class="wrapper">
              <!-- page start-->
              <div class="row">
                  <div class="col-lg-12">
                      <section class="panel">
                          <header class="panel-heading">作者信息列表</header>
                          <!-- 自定义搜索 -->
                          <div class="panel-body">
                              <form id="searchForm" class="form-inline" role="form">
                                  <input type="hidden" name="authorId" value="${(authorId)!}" />
                                  <div class="form-group">
                                      <label for="phone" class="sr-only">标题</label>
                                      <input type="text" class="form-control" id="title" name="title" placeholder="文章标题">
                                  </div>
                                  <button id="searchBtn" type="button" class="btn btn-success">查询</button>
                              </form>
                          </div>
                          <!-- 结束自定义搜索 -->
                       </section>
                       <section class="panel">
                          <table class="table table-striped border-top" id="articleTable">
                          <thead>
                          <tr>
                              <th style="width:8px;"><input type="checkbox" class="group-checkable" data-set="#articleTable .checkboxes" /></th>
                              <th class="dt-body-center">序号</th>
                              <th>标题</th>
                              <th>状态</th>
                              <th>文章等级</th>
                          </tr>
                          </thead>
                          
                          </table>
                      </section>
                  </div>
              </div>
              <!-- page end-->
	      </section>
      </section>
      <!--main content end-->
  </section>

   <#include "admin/common_js.ftl" />
   <script src="${ctx}/js/jquery.validate.min.js" ></script>
   <script type="text/javascript" src="${ctx}/assets/data-tables/jquery.dataTables.js"></script>
   <script type="text/javascript" src="${ctx}/assets/data-tables/DT_bootstrap.js"></script>
   <script src="${ctx}/js/dynamic-table.js"></script>
   <script type="text/javascript">
   	$(function() {
   		var $dataTable = $("#articleTable").DataTable({
	    	ajax: {   
                url: "${ctx}/admin/article/tag.html"
            },
            columns: [
                {"data": "articleId"},
                {"data": null},
                {   "data": "title",
                    "width": "600px",
                    "render": function (data, type, row, meta) {
                        data = data ? data : '';
                        var length = data.length;
                        if(length && length > 70){
                            length = 70;
                            return data.substring(0, length) + "......";
                        } else {
                            return data;
                        }
                    }
                },
                {
                		"data": "status",
                		"render": function(data, type, row, meta) {
                			return data == 0 ? "发布" : data == 1 ? "下架" : "错误选项"; 
                		}
                },
                {
	                	"data": "sort",
	                	"render": function(data, type, row, meta) {
	                		return data == 0 ? "正常" : data == 1 ? "热帖" : data == 2 ? "精华": data == 3 ? "置顶" : "错误选项";
	                	}	
                },
            ],
            "columnDefs": [
            		{
			        "targets": 0,
			        "className": 'dt-body-center',
			        "render": function (data, type, full, meta){
			            return '<input type="checkbox" name="ids" value="' + $('<div/>').text(data).html() + '">';
			        }
		        }
		    ],
            fnDrawCallback: function(){
                var api = this.api();
            　　 var startIndex= api.context[0]._iDisplayStart;
            　　 api.column(1).nodes().each(function(cell, i) {
            　　　　    cell.innerHTML = startIndex + i + 1;
            　　 });
           	 	$(this).find('input[type=checkbox]').removeAttr('checked');  
            }
	    });
	    
	    //查询按钮
        $("#searchBtn").on("click", function () {
	        //查询后不需要保持分页状态，回首页
            $dataTable.draw();
        });
		
   	});
	</script>
  </body>
</html>
